<template>
	<view class="custom-view">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">PWM设置</block>
		</cu-custom>
		<view class="custom-bottom">
			<view class="flex flex-wrap">
				<view class="basis-xs">
					<text class="custom-text">亮度:</text>
				</view>
				<view class="basis-xl">
					<slider :max="100" :min="0" :show-value="true" block-size="20" activeColor="#007aff" :value="light" @change="lightChange" />
				</view>
			</view>
			<view class="flex flex-wrap">
				<view class="basis-xs">
					<text class="custom-text">模式:</text>
				</view>
				<view class="basis-xl">
					<button v-for="(item, index) in list" :key="index" @click="onSelect(item.type, index)" :class="{active: activeIndex === index}"
					 class="custom-btn cu-btn round line-gray">{{item.label}}</button>
				</view>
			</view>
			<view class="flex flex-wrap">
				<button @click="confirm" class="cu-btn block  bg-blue lg submit-btn">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		MODE_TYPE
	} from "@/config.js"

	import {
		setPWM
	} from '@/common/msg-helper.js'

	const {
		GRADIENT, //随机渐变
		JUMP, //随机跳变
		FLASH, //随机频闪
		BREATH, //随机呼吸
		GRADIENT_DO, //音乐律动渐变
		EXPFLASH_DO, //音乐律动爆闪 
	} = MODE_TYPE;

	export default {
		data() {
			return {
				activeIndex: 0,
				light: 0,
				list: [{
						type: GRADIENT,
						label: '渐变'
					},
					{
						type: JUMP,
						label: '跳变'
					},
					{
						type: FLASH,
						label: '闪屏'
					},
					{
						type: BREATH,
						label: '呼吸'
					}
				]
			};
		},
		methods: {
			onSelect(type, index) {
				this.activeIndex = index;
			},
			lightChange(e) {
				this.light = e.detail.value
			},
			send() {
				setPWM(this.light, this.list[this.activeIndex].type)
			},
			confirm() {
				this.send();
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.custom-view {
		min-height: 100vh;
		background: #ffff;

		.custom-text {
			line-height: 30px;
			text-align: right;
			padding-right: 15px;
			display: block;
		}

		.custom-bottom {
			margin-top: 20px;
			padding: 0 20px;

			.input {
				border: 1px solid #e0dfdf;
				border-radius: 3px;
				height: 30px;
				padding: 0 5px;
			}

			.custom-btn {
				margin: 0 5px 0 0 !important;
			}

			.custom-btn.active {
				color: #0081ff !important;
			}

			.submit-btn {
				width: 100%;
				margin-top: 10px;
			}

			.flex-wrap {
				margin-bottom: 15px;
			}
		}
	}
</style>
